<template>
  <a-page id="forums">
    <div slot="nav">
      <page-forum-nav></page-forum-nav>
    </div>
    <q-inner-loading :visible="!querySet" style="height: 50vh">
      <q-spinner-Dots size="50px" color="primary"></q-spinner-Dots>
    </q-inner-loading>
    <div class="row justify-center">
      <div v-if="querySet"  class="col-xl-8 col-lg-9 col-md-12 col-sm-12 col-xs-12">
        <a-forum-list :forums="querySet" class="bg-white round-borders q-mx-sm" :type="type" :class="{'shadow-light': $q.screen.gt.md}"></a-forum-list>
        <a-loading v-if="querySet" :visible="loading" :center="false" class="q-my-xs"></a-loading>
        <a-pagination :page="page" :max="max" v-if="this.$q.platform.has.touch"></a-pagination>
        <div v-if="auth" class="q-my-md q-mx-sm">
          <div class="row items-center shadow-light bg-white q-mb-sm">
            <q-input
              v-model="title"
              placeholder="讨论标题"
              dense
              class="col no-shadow size-16 q-px-md"
              borderless
              max-length="64"
            >
            </q-input>
            <q-select
              dense
              borderless
              class="size-14 q-mr-sm"
              map-options
              v-model="forumType"
              radio
              :options="selectOptions"
            />
          </div>
          <!--<q-editor-->
            <!--v-model="content"-->
            <!--class="no-border shadow-light"-->
            <!--:toolbar="[-->
            <!--['bold', 'italic', 'link', 'quote', 'unordered', 'ordered',-->
            <!--{-->
              <!--icon: 'title',-->
              <!--list: 'no-icons',-->
              <!--options: ['p', 'h2', 'h3']-->
            <!--},-->
            <!--'fullscreen'],-->
          <!--]"-->
           <!--toolbar-color="grey-7"-->
            <!--toolbar-bg="white"-->
            <!--toolbar-flat-->
            <!--content-class="text-editor"-->
          <!--/>-->
          <a-editor v-model="content"></a-editor>
          <!--<q-input-->
            <!--v-model="content"-->
            <!--placeholder="讨论内容"-->
            <!--type="textarea"-->
            <!--rows="7"-->
            <!--color="white"-->
            <!--class="shadow-light"-->
            <!--inverted-light-->
          <!--/>-->
          <div class="q-mt-md text-right">
            <q-btn color="primary" class="q-px-lg" label="发布" :disabled="!title || !content || loading" @click="submit"/>
          </div>
        </div>
        <div v-else class="shadow-light q-py-xl bg-white text-center">
          <router-link to="/login/">
            <q-btn color="primary" label="请登录发布讨论"/>
          </router-link>
        </div>
      </div>
    </div>
  </a-page>
</template>

<script>
  import { querySetMixin } from '../mixins'
  import PageForumNav from './nav/forum'
  // import AEditor from '../components/editor'

  export default {
    name: 'PageForums',
    mixins: [querySetMixin],
    components: { PageForumNav,
      AEditor: function (resolve) {
        require(['../components/editor'], resolve)
      }
    },
    props: {
      type: {
        type: String,
        required: false,
        default: 'all'
      }
    },
    data () {
      return {
        api: '/api/forum/',
        limit: 20,
        infinite: !this.$q.platform.has.touch,
        title: '',
        content: '',
        forumType: 1,
        forumTypeOptions: [
          { label: '讨论', value: 1, type: 'forum' },
          { label: '反馈', value: 2, type: 'feedback' },
          { label: '公告', value: 3, type: 'notice' },
          { label: '灌水', value: 4, type: 'chat' }
        ],
        textEditorOptions: {
          placeholder: '讨论内容',
          modules: {
            toolbar: {
              container: '#text-editor-desc',
              handlers: {
                'image': this.openFileDialog
              }
            },
            clipboard: {}
          }
        }
      }
    },
    created () {
    },
    computed: {
      selectOptions () {
        return this.forumTypeOptions.filter(item => item.type !== 'notice' || (this.auth && this.auth.is_staff === true))
      },
      queryParams () {
        const query = { page: this.page }

        for (const options of this.forumTypeOptions) {
          if (this.type === options.type) {
            query.category = options.value
          }
        }

        return query
      }
    },
    watch: {
    },
    methods: {
      async submit () {
        const { status } = await this.postRequest({
          api: '/api/forum/',
          data: {
            title: this.title,
            content: this.content,
            category: this.forumType
          }
        })

        if (status === 201) {
          this.title = ''
          this.content = ''
          this.notify('success', '成功发布讨论')
        } else {
          this.notify('error', '发帖时发生错误')
        }

        if (this.page > 1) {
          this.$router.push(this.$route.path)
        } else {
          this.query()
        }
      }
    }
  }
</script>

<style lang="stylus">
  .text-editor
    p
      font-size 18px!important
</style>
